<template>
  <div class="intelligent-cockpit">
    <!-- 标题 -->
    <h1 class="title">产业链供应分析知识图谱系统</h1>

    <!-- 数据陈列区域 -->
    <div class="data-display">
      <div class="data-item">
        <span class="data-label">公司数量</span>
        <span class="data-value">{{ companyCount }}</span>
      </div>
      <div class="data-item">
        <span class="data-label">产品数量</span>
        <span class="data-value">{{ productCount }}</span>
      </div>
      <div class="data-item">
        <span class="data-label">专利数量</span>
        <span class="data-value">{{ patentCount }}</span>
      </div>
    </div>

    <!-- 柱状图区域 -->
    <div class="chart-container">
      <h2 class="chart-title">各公司产品数量对比</h2>
      <div ref="barChart" style="width: 100%; height: 400px;"></div>
    </div>

    <!-- 扇形图区域 -->
    <div class="chart-container">
      <h2 class="chart-title">专利类型分布</h2>
      <div ref="pieChart" style="width: 100%; height: 400px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      companyCount: 10,
      productCount: 50,
      patentCount: 20,
      barChartData: {
        companies: ['公司 A', '公司 B', '公司 C', '公司 D', '公司 E'],
        products: [12, 8, 15, 6, 9]
      },
      pieChartData: [
        { value: 8, name: '发明专利' },
        { value: 5, name: '实用新型专利' },
        { value: 7, name: '外观设计专利' }
      ]
    };
  },
  mounted() {
    this.initBarChart();
    this.initPieChart();
  },
  methods: {
    initBarChart() {
      const barChart = echarts.init(this.$refs.barChart);
      const option = {
        xAxis: {
          type: 'category',
          data: this.barChartData.companies
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.barChartData.products,
            type: 'bar',
            itemStyle: {
              color: '#5793f3'
            }
          }
        ]
      };
      barChart.setOption(option);
    },
    initPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart);
      const option = {
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: this.pieChartData,
            label: {
              formatter: '{b}: {d}%'
            },
            itemStyle: {
              colors: ['#d14a61', '#675bba', '#ffb980']
            }
          }
        ]
      };
      pieChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.intelligent-cockpit {
  padding: 20px;
  background-color: #f4f4f4;
}

.title {
  text-align: center;
  color: #333;
}

.data-display {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.data-item {
  text-align: center;
}

.data-label {
  font-size: 18px;
  color: #666;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.chart-container {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chart-title {
  margin-bottom: 10px;
  color: #333;
}
</style>
